🦋 Changeset detected

Latest commit: 51f97f1

The changes in this PR will be included in the next version bump.

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

The latest updates on your projects. Learn more about Vercel for Git ↗︎

/snapshot-this

🚀 A snapshot release has been made for this PR

Test the snapshots by updating your package.json with the newly published versions:

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add [email protected]

yarn add @medusajs/[email protected]

yarn add [email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

yarn add @medusajs/[email protected]

Latest commit: f541e21

Hi, I have tried out the datatable, I am not sure if it is intenden. But it seems like when the data for the datatable is empty and it is loading, the <DataTable.Search> input gets hidden.
This is a bit annoying if you are typing something and the input disappears.

A workaround is to use the previous data, such that the data is not empty, but is this the intended way to use it?

Hello @kasperkristensen,
I would like to be able to make a row a link, I can see that the other datatable has a navigateTo prop, which the new data table does not have. Could this be added to the new datatable? Or is there another way to make this work?

Hello @kasperkristensen, I would like to be able to make a row a link, I can see that the other datatable has a navigateTo prop, which the new data table does not have. Could this be added to the new datatable? Or is there another way to make this work?

You can pass an onRowClick callback to the hook, you can see how we use it in the dashboard project for navigation:

Hi, I have tried out the datatable, I am not sure if it is intenden. But it seems like when the data for the datatable is empty and it is loading, the <DataTable.Search> input gets hidden. This is a bit annoying if you are typing something and the input disappears.

A workaround is to use the previous data, such that the data is not empty, but is this the intended way to use it?

Hi @Alexnortung, it is intended according the design spec for the component, but I can see why it might be a bit annoying. I'll ping our designer if we should change it so the search bar is never hidden.

But generally I would always avoid having no data while loading, as it will cause layout shifts when the table goes from data -> no data -> data. The way we handle this internally is that we keep the old data until the new data is ready. If you are using @tanstack/react-query that can be done by using keepPreviousData for the placeholderData:

import { keepPreviousData } from "@tanstack/react-query"

const Component = () => {
  const data = useQuery({
    queryKey: [...],
    queryFn: () => {...},
    placeholderData: keepPreviousData
  })
}

Deployment failed with the following error:

The provided GitHub repository does not contain the requested branch or commit reference. Please ensure the repository is not empty.

Thanks for the feedback @kasperkristensen, it was helpful!
I have tried using the datatable a bit more and I have another note:
The toolbar seems to have some kind of z index where it will be on top of tooltips and modals. In the following screenshot you can notice that the first line in the tooltip is missing, but the tooltip looks right on the other rows.

The following shows how it looks with a modal, where the table is behind it:

Thanks for the feedback @kasperkristensen, it was helpful! I have tried using the datatable a bit more and I have another note: The toolbar seems to have some kind of z index where it will be on top of tooltips and modals. In the following screenshot you can notice that the first line in the tooltip is missing, but the tooltip looks right on the other rows.

The following shows how it looks with a modal, where the table is behind it:

Yes the header has a z-index of 1, but this should not cause any issues as the wrapping table has isolation: isolate which creates a new stacking context. Here is how it looks on my end:

Could you maybe share small reproduction of how you are using the component, and which browser you are using. Also it looks like your CSS is incorrect, if you haven't already make sure to also add a resolution for @medusajs/ui-preset with the snapshot version above, and see if that helps.